<template>
    <div class="topnav">
        <router-link to="/" class="logo" >
          <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-xing"></use>
          </svg>
        </router-link>
        <ul class="menu">
            <li>
              <router-link to="/doc">文档</router-link>
            </li>
        </ul>
        <span v-if="toggleAsideButton" class="toggleAside" @click="toggleAside">
        <el-icon><Expand /></el-icon>
        </span>
    </div>
</template>
<script lang="ts">
import { inject, Ref } from 'vue'
export default {
  props: {
    toggleAsideButton: {
      type: Boolean,
      default: false
    }
  },
  setup(){
    const asideVisible = inject<Ref<boolean>>('asideVisible')
    const toggleAside = () => {
      asideVisible.value = !asideVisible.value;
    }
    return {toggleAside}
  }
}
</script>
<style lang="scss" scoped>
    .topnav {
        display: flex;
        position: relative;
        z-index: 10;
        padding: 16px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        justify-content: center;
        align-items: center;
        > .logo {
          max-width: 6em;
          margin-right: auto;
          > svg {
            width: 32px;
            height: 32px;
          }
        }
        > .menu {
          display: flex;
          white-space: nowrap;
          flex-wrap: nowrap;
          > li {
            margin: 0 1em;
          }
        }
        > .toggleAside {
          width: 24px;
          height: 24px;
          position: absolute;
          left: 16px;
          top: 50%;
          transform: translateY(-50%);
          display: none;
        }
        @media (max-width: 500px) {
          > .menu {display: none;}
          > .logo {margin: 0 auto;}
          > .toggleAside{display: inline-block;}
        }
    }
    
</style>